<template>
  <div id="userLogin">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="userAccount"
            name="userAccount"
            label="账号"
            placeholder="请输入账号"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="userPassword"
            type="password"
            name="userPassword"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
            v-model="checkPassword"
            type="password"
            name="checkPassword"
            label="确认密码"
            placeholder="请再次输入密码"
            :rules="[{ validator, message: '请输入正确密码' }]"
        />
        <van-field
            v-model="planetCode"
            name="planetCode"
            label="编号"
            placeholder="请输入编号"
        />
      </van-cell-group>
      <div style="margin: 32px;">
        <van-button :loading="isLoading" loading-text="注册中..." plain hairline round block type="primary" native-type="submit">
          注册
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import request from "../../plugins/request.ts";
import {showSuccessToast} from "vant/es";
import {useRouter} from "vue-router";

const router = useRouter();
const isLoading = ref(false)
const userAccount = ref('');
const userPassword = ref('');
const checkPassword = ref('');
const planetCode = ref("")

/**
 * 密码校验规则
 */
const validator = () => {
  if (userPassword.value !== checkPassword.value) {
    return `两次密码不相同，请重新输入`
  }
};
const onSubmit = async () => {
  isLoading.value = true
  const res = await request.post("/user/register", {
    "userAccount": userAccount.value,
    "checkPassword": checkPassword.value,
    "planetCode": planetCode.value,
    "userPassword": userPassword.value
  })
  if (res.data.code === 200 && res.data.data) {
    showSuccessToast('注册成功');
    await router.push({
      path: '/user/login'
    })
    isLoading.value = false
  } else {
    showSuccessToast("注册失败" + res.data.description)
    isLoading.value = false
  }

};

</script>

<style scoped>

</style>